<template>
  <div class="merchant-detail-view">
    <div class="merchant-header">
      <div class="container">
        <div class="header-content">
          <div class="merchant-info">
            <div class="basic-info">
              <img :src="merchant.logo" :alt="merchant.name" class="merchant-logo">
              <div class="info-text">
                <h1>{{ merchant.name }}</h1>
                <p class="description">{{ merchant.description }}</p>
                <div class="merchant-features" v-if="merchant.features && merchant.features.length > 0">
                  <el-tag v-for="feature in merchant.features" :key="feature" type="success" style="margin-right: 8px; margin-bottom: 4px;">
                    {{ feature }}
                  </el-tag>
                </div>
                <div class="merchant-meta">
                  <span><el-icon><Location /></el-icon> {{ merchant.address }}</span>
                  <span><el-icon><Phone /></el-icon> {{ merchant.phone }}</span>
                  <span><el-icon><Clock /></el-icon> {{ merchant.hours }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="content-section" v-loading="loading">
        <!-- 审核状态提示 -->
        <div v-if="merchant.isApproved !== 1" class="approval-status-section">
          <div class="approval-status-card">
            <div class="approval-icon">
              <el-icon v-if="merchant.isApproved === 0" size="80" color="#f59e0b"><Clock /></el-icon>
              <el-icon v-else-if="merchant.isApproved === 2" size="80" color="#ef4444"><CloseBold /></el-icon>
            </div>
            <h2 class="approval-title">{{ merchant.approvalStatus }}</h2>
            <p class="approval-description" v-if="merchant.isApproved === 0">
              该商家正在审核中，请耐心等待。审核通过后将显示完整菜单信息。
            </p>
            <p class="approval-description" v-else-if="merchant.isApproved === 2">
              该商家审核未通过，暂时无法提供服务。
            </p>
          </div>
        </div>

        <!-- 菜单部分（只有审核通过才显示） -->
        <div v-if="merchant.canShowMenu" class="menu-section">
          <div class="section-header">
            <h2>菜单</h2>
            <div class="menu-filters">
              <el-button 
                v-for="category in menuCategories" 
                :key="category.id"
                :type="selectedCategory === category.id ? 'primary' : ''"
                @click="filterByCategory(category.id)"
              >
                {{ category.name }}
              </el-button>
            </div>
          </div>
          
          <div v-if="filteredMenuItems.length > 0" class="menu-grid">
            <div v-for="item in filteredMenuItems" :key="item.id" class="menu-item">
              <img :src="item.image" :alt="item.name" class="item-image">
              <div class="item-info">
                <h3>{{ item.name }}</h3>
                <p class="item-description">{{ item.description }}</p>
                <div class="item-footer">
                  <span class="price">¥{{ item.price }}</span>
                  <div class="item-actions">
                    <el-button type="primary" size="small" @click="viewItemDetail(item.id)">查看详情</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 空状态提示 -->
          <div v-else class="empty-menu">
            <div class="empty-icon">🍽️</div>
            <h3>暂无菜品</h3>
            <p>该商家还没有上架任何菜品，请稍后再来看看</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Location, Phone, Clock, CloseBold } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'MerchantDetailView',
  components: {
    Location,
    Phone,
    Clock,
    CloseBold
  },
  data() {
    return {
      selectedCategory: 0,
      merchant: {},
      menuCategories: [
        { id: 0, name: '全部' }
      ],
      menuItems: [],
      loading: false
    }
  },
  computed: {
    filteredMenuItems() {
      if (this.selectedCategory === 0) {
        return this.menuItems
      }
      return this.menuItems.filter(item => item.categoryId === this.selectedCategory)
    }
  },
  mounted() {
    const merchantId = this.$route.params.id
    this.loadMerchantDetail(merchantId)
  },
  methods: {
    async loadMerchantDetail(id) {
      this.loading = true
      try {
        const response = await fetch(`http://localhost:2077/api/public/merchants/${id}`)
        const data = await response.json()
        
        if (data.success) {
          const merchantData = data.data
          this.merchant = {
            id: merchantData.id,
            name: merchantData.name,
            logo: merchantData.logo,
            description: merchantData.description,
            address: merchantData.address,
            phone: merchantData.phone,
            hours: merchantData.businessHours,
            features: merchantData.features || [],
            isApproved: merchantData.isApproved,
            approvalStatus: merchantData.approvalStatus,
            canShowMenu: merchantData.canShowMenu
          }
          
          // 处理菜品数据
          this.menuItems = merchantData.menuItems.map(item => ({
            id: item.id,
            name: item.name,
            price: item.price,
            description: item.description,
            image: item.image,
            categoryId: item.categoryId,
            categoryName: item.categoryName
          }))
          
          // 构建分类列表
          const categories = new Set()
          this.menuItems.forEach(item => {
            if (item.categoryName) {
              categories.add(item.categoryName)
            }
          })
          
          this.menuCategories = [
            { id: 0, name: '全部' },
            ...Array.from(categories).map((name, index) => ({
              id: index + 1,
              name: name
            }))
          ]
          
          // 为菜品分配分类ID
          this.menuItems.forEach(item => {
            const category = this.menuCategories.find(cat => cat.name === item.categoryName)
            if (category) {
              item.categoryId = category.id
            }
          })
          
        } else {
          ElMessage.error(data.message || '加载商家详情失败')
        }
      } catch (error) {
        console.error('加载商家详情失败:', error)
        ElMessage.error('加载商家详情失败')
      } finally {
        this.loading = false
      }
    },
    filterByCategory(categoryId) {
      this.selectedCategory = categoryId
    },
    viewItemDetail(itemId) {
      this.$router.push(`/food/${itemId}`)
    }
  }
}
</script>

<style scoped>
.merchant-detail-view {
  background-color: #f5f5f5;
}

.merchant-header {
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.header-content {
  position: relative;
  padding: 20px 0;
}

.merchant-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.basic-info {
  display: flex;
  gap: 20px;
  flex: 1;
}

.merchant-logo {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.info-text h1 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 28px;
}

.description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.merchant-features {
  margin-bottom: 15px;
}

.approval-status-section {
  margin-bottom: 40px;
}

.approval-status-card {
  background: white;
  border-radius: 12px;
  padding: 60px 40px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border: 2px solid #f3f4f6;
}

.approval-icon {
  margin-bottom: 24px;
}

.approval-title {
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 16px 0;
  color: #374151;
}

.approval-description {
  font-size: 18px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
  max-width: 500px;
  margin: 0 auto;
}

.merchant-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.merchant-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666;
  font-size: 14px;
}

.content-section {
  display: block;
}

.menu-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 80px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  margin: 0;
  color: #333;
}

.menu-filters {
  display: flex;
  gap: 10px;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.menu-item {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s;
}

.menu-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.item-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.item-info {
  padding: 15px;
}

.item-info h3 {
  margin: 0 0 8px 0;
  color: #333;
}

.item-description {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
}

.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: #e74c3c;
}

.item-actions {
  display: flex;
  gap: 8px;
}

.empty-menu {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 20px;
  opacity: 0.6;
}

.empty-menu h3 {
  margin: 0 0 10px 0;
  font-size: 1.5rem;
  color: #333;
}

.empty-menu p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .nav-menu {
    display: none;
  }
  
  .basic-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .merchant-info {
    flex-direction: column;
    gap: 20px;
  }
  
  .menu-grid {
    grid-template-columns: 1fr;
  }
}
</style> 